<template>
  <div v-if="data.city" class="content-container">
    <el-input
        ref="textarea"
        type="textarea"
        class="text-area"
        resize="none"
        placeholder="请输入内容"
        v-model="content">
    </el-input>

    <el-row type="flex" justify="center" class="btn-area">
      <el-button @click="handleCopy" round plain>复制天气内容</el-button>
    </el-row>
    
    <div class="switch-area">
      <el-row class="switch-item" v-for="(item, i) in options" :key="i">
        <el-col :span="20">
          {{ item.iname }}
        </el-col>
        <el-col :span="4">
          <el-switch
              v-model="item.value"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false"
              @change="handleChange">
          </el-switch>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      content : '',
    }
  },
  created() {
    this.updateOptions();
    this.handleStr();
  },
  methods: {
    handleChange() {
      let arr = this.options.map(item => ({iname: item.iname, value: item.value}));
      this.$store.commit('setIndexSelect',arr);
      this.updateOptions();
      this.handleStr();
    },
    updateOptions(){
      if(!this.data.index) return;
      this.options = this.$store.state.indexSelect.map((item,i)=>({...item, ...this.data.index[i]}));
    },
    handleStr(){
      console.log(this.data,this.cityName,this.areaName)
      if(!this.data.city) return;
      let {updatetime,weather,temp,temphigh,templow} = this.data;
      this.content =
          `📌 城市：${this.$store.getters.cityName}市 ${this.$store.getters.areaName}
📌 日期：${updatetime.split(' ')[0]}
📌 天气：${weather}
📌 温度：${temp}℃
📌 最低气温：${templow}℃
📌 最高气温：${temphigh}℃
${this.indexStr}
 `;
    },
    handleCopy (){
      let textarea = document.querySelector('.text-area textarea');
      textarea.select();
      document.execCommand("Copy");
      textarea.blur();
    }
  },
  computed : {
    indexStr (){
      return this.options.filter(item=>item.value).reduce((count,item)=>{
        count = count + `📌 ${item.iname}：${item.detail}
`;
        return count
      },'')
    },
    data(){
      return this.$store.state.weatherData;
    },
  },
}
</script>

<style lang="less">
.content-container {
  padding: 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #676767;
  overflow: scroll;
  
  .text-area {
    height: 50%;
    box-shadow: 3px 3px 20px 0 #c3c3ce;
    border-radius: 15px;
    overflow: hidden;
    textarea {
      height: 100%;
      font-size: 14px;
      line-height: 1.8;
      resize: none;
      overflow-y: scroll;
      outline: none;
      border: none;
    }
  }

  .btn-area{
    margin-top: 20px;
    button {
      width: 100%;
      box-shadow: 3px 3px 20px 0 #c3c3ce;
    }
  }
  
  .switch-area{
    margin-top: 20px;
    padding: 5px 20px;
    background-color: #fff;
    box-shadow: 3px 3px 20px 0 #c3c3ce;
    border-radius: 15px;
    overflow: hidden;
    .switch-item {

      padding: 10px 0;
    }
  }
  
}
</style>